<template>
  <div>
    <mt-navbar v-model="selected">
      <mt-tab-item id="1">未开始</mt-tab-item>
      <mt-tab-item id="2">已结束</mt-tab-item>
    </mt-navbar>

    <mt-tab-container v-model="selected">
      <mt-tab-container-item id="1">
        <ul class="test-item coming">
          <li v-for="(item, index) in showComingTests" :key="index">
            <div class="left">
              <div class="name">{{item.courseName}}</div>
              <div class="info">{{ item.building + '  ' + item.classroom }}&nbsp;座位号:{{ item.seat }}</div>
              <div class="info">{{ fmtDate(item.d) }}&nbsp;{{item.time}}</div>
            </div>
            <div class="right">{{ item.duration }}</div>
          </li>
        </ul>
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <ul class="test-item over">
          <li v-for="(item, index) in showOverTests" :key="index">
            <div class="left">
              <div class="name">{{item.courseName}}</div>
              <div class="info">{{ item.building + '  ' + item.classroom }}&nbsp;座位号:{{ item.seat }}</div>
              <div class="info">{{ fmtDate(item.d) }}&nbsp;{{item.time}}</div>
            </div>
            <div class="right">已结束</div>
          </li>
        </ul>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import fetch from '@/libs/fetch';
export default {
  data(){
    return {
      selected: '1',
      tests: []
    }
  },
  methods:{
    fetchData(){
      fetch.post({
        url: '/getKaoBiao',
        success: (res) => {
          console.log(res);
          if(res.data.code === 0){
            this.tests = this.fmtData(res.data.data);
            // console.log(this.tests);
            this.$store.commit('setTests', this.tests);
          }
        }
      })
    },
    fmtData(data){
      let times = 0;
      let days = 0;
      for(let item of data){
        days = parseInt(item.week) * 7 + parseInt(item.day) - 2;
        times = days * 24 * 60 * 60 * 1000;
        item.d = this.openDate + times;
        item.duration = days - this.todayDuration;
      }
      return data;
    },
    fmtDate(dateNum){
      let d = new Date(parseInt(dateNum));
      return d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
    },
    sortBy(a,b){
      return a.duration > b.duration;
    }
  },
  mounted(){
    if(this.getTests.length){
      this.tests = this.getTests;
    }else{
      this.fetchData();
    }
  },
  computed:{
    ...mapGetters([
      'getOpenDate',
      'getTests'
    ]),
    openDate(){
      return (new Date(this.getOpenDate)).getTime();
    },
    today(){
      let d = (new Date()).getTime();
      return (new Date(this.fmtDate(d))).getTime();
    },
    todayDuration(){
      return Math.floor((this.today - this.openDate) / (24 * 60 * 60 * 1000));
    },
    showComingTests(){
      return this.tests.filter((item) => {
        return item.duration >= 0;
      }).sort(this.sortBy);
    },
    showOverTests(){
      return this.tests.filter((item) => {
        return item.d < this.today;
      }).sort(this.sortBy);
    }
  }
}
</script>
<style scoped>
.test-item{
  list-style: none;
  background: #fff;
}
.test-item li{
  position: relative;
  margin-top: 10px;
}
.test-item li .left{
  width: 100%;
  padding: 10px 70px 10px 10px;
  box-sizing: border-box;
  display: inline-block;
}
.test-item li .left .name{
  font-weight: bold;
}
.test-item li .right{
  width: 70px;
  height: 100%;
  text-align: center;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  color: #fff;
  line-height: 80px;
}
.coming li .right{
  background: #d00;
}
.over li .right{
  background: #ccc;
}
</style>
